<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" >
<h:body>
	<ui:composition template="/templates/master.xhtml">
		<ui:define name="content">
			<h:form id="memberList">
			<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" >
				<p:effect type="fade" event="load" delay="1000" />
			</p:messages>  
			<p:panel id="panel" header="Member List">  
				<p:accordionPanel activeIndex="-1">  
					<p:tab title="Advance Search" >  
						<h:panelGrid columns="4" cellpadding="5">
							<h:outputLabel for="name" value="Name:" />  
					    	<p:inputText id="name" value="#{memberMB.memberSearch.name}" />					
							<h:outputLabel for="nric" value="NRIC/Passport No.:" />  
					    	<p:inputText id="nric" value="#{memberMB.memberSearch.nric}" />		
						 
							<h:outputLabel for="DOBFrom" value="Date From - DOB:" />  
					    	<p:calendar id="DOBFrom" value="#{memberMB.memberSearch.dobFrom}" />					
							<h:outputLabel for="DOBTo" value="Date To - DOB:" />  
					    	<p:calendar id="DOBTo" value="#{memberMB.memberSearch.dobTo}" />	
					    	
							<h:outputLabel for="email" value="Email:" />  
					    	<p:calendar id="email" value="#{memberMB.memberSearch.email}" />					
							<h:outputLabel for="mobile" value="Mobile:" />  
					    	<p:calendar id="mobile" value="#{memberMB.memberSearch.mobileNo}" />						    	

							<h:outputLabel for="expiredFrom" value="Date From - Expiry:" />  
					    	<p:calendar id="expiredFrom" value="#{memberMB.memberSearch.expiryFrom}" />					
							<h:outputLabel for="expiredTo" value="Date To - Expiry:" />  
					    	<p:calendar id="expiredTo" value="#{memberMB.memberSearch.expiryTo}" />	

							<h:outputLabel for="paymentFrom" value="Date From - Last Payment:" />  
					    	<p:calendar id="paymentFrom" value="#{memberMB.memberSearch.lastPaymentFrom}" />					
							<h:outputLabel for="paymentTo" value="Date To - Last Payment:" />  
					    	<p:calendar id="paymentTo" value="#{memberMB.memberSearch.lastPaymentTo}" />	

							<h:outputLabel for="suspend" value="Suspended:" />  
							<p:selectOneMenu id="suspend" value="#{memberMB.memberSearch.suspended}">  
					            <f:selectItem itemLabel="Yes" itemValue="true" />  
					            <f:selectItem itemLabel="No" itemValue="false" />  
					        </p:selectOneMenu> 
							<h:outputLabel for="terminate" value="Status:" />  
							<p:selectOneMenu id="terminate" value="#{memberMB.memberSearch.active}">  
							<f:selectItem itemLabel="Active" itemValue="true" />  
					            <f:selectItem itemLabel="Inactive" itemValue="false" />  
					            
					        </p:selectOneMenu> 
						 
						</h:panelGrid>
						<p:commandButton value="Search" action="#{memberMB.search}" update=":memberList:memberTable"/>
					</p:tab>
				</p:accordionPanel>
			
			    <p:dataTable id="memberTable" var="member" value="#{memberMB.allMembers}" sortMode="multiple" 
			    	rows="20" paginator="true" filteredValue="#{memberMB.filteredMembers}">
			    
					<p:ajax event="rowSelect" listener="#{memberMB.onRowSelect}" />
					<p:ajax event="rowUnselect" listener="#{memberMB.onRowUnselect}" />  

			        <p:column id="NameCol" sortBy="#{member.name}" headerText="Name" filterMatchMode="contains">  
			            <h:outputText value="#{member.name}" />  
			        </p:column>  
			        
			        <p:column id="MobileCol" sortBy="#{member.mobileNo}" headerText="Mobile" filterMatchMode="contains">  
			            <h:outputText value="#{member.mobileNo}" />  
			        </p:column>  			        
			  
			        <p:column id="EmailCol" sortBy="#{member.email}" headerText="Email" filterMatchMode="contains">  
			            <h:outputText value="#{member.email}" />  
			        </p:column>  
			        
			        <p:column id="StatusCol" sortBy="#{member.active}" headerText="Status" >  
			            <h:outputText value="#{member.active == true ? 'Active' : 'Terminated'}" />  
			        </p:column> 			        
			        
			        <p:column width="1%" headerText="Action">
			        	<p:commandButton id="updateBtn" icon="ui-icon-pencil" update=":updateMemberForm" onclick="memberUpdateDialogWidget.show();" 
			        		process="@this" actionListener="#{memberMB.preSelectedMember(member)}" rendered="#{member.active}" styleClass="list-button">
							<f:setPropertyActionListener target="#{memberMB.member}" value="#{member}" />
						</p:commandButton>
						<p:tooltip for="updateBtn" value="Edit" showEffect="fade" hideEffect="fade" />  
			        	
			        	<p:commandButton id="suspendBtn" icon="ui-icon-close" update=":suspendTerminateMemberForm" onclick="memberSuspendTerminateDialogWidget.show();" 
			        		process="@this" rendered="#{member.active}" styleClass="list-button">
							<f:setPropertyActionListener target="#{memberMB.member}" value="#{member}" />
						</p:commandButton>
						<p:tooltip for="suspendBtn" value="Suspend/Terminate" showEffect="fade" hideEffect="fade" />  

			        	<p:commandButton id="PackageBtn" icon="ui-icon-suitcase" update=":PackageExpiryMemberForm" onclick="memberPackageExpiryDialogWidget.show();" 
			        		process="@this" rendered="#{member.active}" styleClass="list-button">
							<f:setPropertyActionListener target="#{memberMB.member}" value="#{member}" />
						</p:commandButton>
						<p:tooltip for="PackageBtn" value="Change Package/Expiry Date" showEffect="fade" hideEffect="fade" />  						
			        </p:column>
			    </p:dataTable> 



			</p:panel>
			</h:form>
			<ui:include src="/member/member/Update.xhtml" />
			<ui:include src="/member/member/SuspendTerminate.xhtml" />
			<ui:include src="/member/member/PackageExpiry.xhtml" />
		</ui:define>
	</ui:composition>
</h:body>
</html>